var vm = new Vue({
    el: '#app',
    delimiters: ['[[', ']]'], // 修改vue模板符号，防止与django冲突
    data: {
        host: host,
        username: sessionStorage.username || localStorage.username,
        user_id: sessionStorage.user_id || localStorage.user_id,
        avatar_url: sessionStorage.avatar_url || localStorage.avatar_url,
        token: sessionStorage.token || localStorage.token,
        nick_name: sessionStorage.nick_name || localStorage.nick_name,
        page: 1, // 当前页数
        page_size: 10, // 每页数量
        count: 0,  // 总数量

        spit:'',  //吐槽详情数据
        spit_id: -1, // 点击的吐槽的id

        auth_name:'',
        auth_id:'',

        comments:[], //吐槽评论列表

        edit_comment_flag:false, // 发布评论框的显示标志

        introduct:''

    },
    computed: {
        total_page: function () {  // 总页数
            return Math.ceil(this.count / this.page_size);
        },
        next: function () {  // 下一页
            if (this.page >= this.total_page) {
                return 0;
            } else {
                return this.page + 1;
            }
        },
        previous: function () {  // 上一页
            if (this.page <= 0) {
                return 0;
            } else {
                return this.page - 1;
            }
        },
        page_nums: function () {  // 页码
            // 分页页数显示计算
            // 1.如果总页数<=5
            // 2.如果当前页是前3页
            // 3.如果当前页是后3页,
            // 4.既不是前3页，也不是后3页
            var nums = [];
            if (this.total_page <= 5) {
                for (var i = 1; i <= this.total_page; i++) {
                    nums.push(i);
                }
            } else if (this.page <= 3) {
                nums = [1, 2, 3, 4, 5];
            } else if (this.total_page - this.page <= 2) {
                for (var i = this.total_page; i > this.total_page - 5; i--) {
                    nums.push(i);
                }
            } else {
                for (var i = this.page - 2; i < this.page + 3; i++) {
                    nums.push(i);
                }
            }
            return nums;
        }
    },
    mounted: function () {

        this.spit_id = this.get_query_string('spit_id');
        if(this.get_query_string('edit_comment_flag') == "8"){
            this.edit_comment_flag = true;
            console.log(this.edit_comment_flag);
        }
        // console.log(this.spit_id);

        this.get_spit(); // 获取吐槽详情

        CKEDITOR.replace('edit_comment',{'filebrowserUploadUrl':this.host + '/ckeditor/upload/'});


        // 获取吐槽评论
        this.get_comments();



    },
    methods: {
        logout: function() {
            sessionStorage.clear();
            localStorage.clear();
            location.href = './person-loginsign.html';
        },
        // 获取url路径参数
        get_query_string: function (name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURI(r[2]);
            }
            return null;
        },

        // 点击页数
        on_page: function (num) {
            if (num != this.page) {
                this.page = num;
                this.get_comments();
            }
        },

        // 获取吐槽详情
        get_spit: function () {
            axios.get(this.host + '/tucaos/' + this.spit_id + '/', {
                // 向后端传递JWT token的方法
                headers: {
                    // 后台接收的JWT对格式有要求,'JWT'开头,空一格拼接字符串
                    'Authorization': 'JWT ' + this.token
                },
                responseType: 'json',
                // withCredentials: true
            })
                .then(response => {
                    this.spit = response.data;
                    console.log(this.spit);
                    if(this.spit.user){
                        this.auth_id = this.spit.user.id;
                        this.auth_name = this.spit.user.nick_name;
                    }else{
                        this.auth_name = this.spit.username;
                    }
                })
                // .catch(error => {
                //     console.log(error.response.data);
                // })
        },

         // 获取吐槽评论列表
        get_comments:function () {
            axios.get(this.host + '/tucaos/' + this.spit_id + '/' + 'comments/', {
                params: {
                    page: this.page,
                    page_size: this.page_size,
                },
                 headers: {
                        // 后台接收的JWT对格式有要求,'JWT'开头,空一格拼接字符串
                        'Authorization': 'JWT ' + this.token
                    },
                responseType: 'json',
                // withCredentials: true
            })
                .then(response => {
                    this.count = response.data.count;
                    this.comments = response.data.results;
                    // console.log(this.comments);
                })
                .catch(error => {
                    console.log(error.response.data);
                })
        },
        // 点赞与取消点赞---吐槽
        spit_follow:function () {

            if(this.user_id){
                axios.post(this.host + '/tucaos/follows/', {
                    tucao_id: this.spit_id,
                    action: (this.spit.spit_follow?"unfollow":"follow"),
                    }, {
                        // 向后端传递JWT token的方法
                        headers: {
                            // 后台接收的JWT对格式有要求,'JWT'开头,空一格拼接字符串
                            'Authorization': 'JWT ' + this.token
                        },
                        responseType: 'json',
                        // withCredentials:true
                    })
                    .then(response => {

                        console.log(response.data);
                        // console.log(this.spit_id);
                        // location.href = './spit-index.html'
                        // 刷新数据
                        this.get_spit();

                    })
                    .catch(error=> {
                        if (error.response.status == 400) {
                            // alert(error.response.data);
                            console.log(error.response.data)
                        } else {
                            console.log(error.response.data);
                        }
                    })
            }else{
                location.href = './person-loginsign.html';
            }
        },

        // 点赞与取消点赞---评论
        commnet_follow:function (comment_id,comment_follow) {

            if(this.user_id){
                axios.post(this.host + '/tucaos/comments/follows/', {
                    tucao_id: this.spit_id,
                    comment_id:comment_id,
                    action: (comment_follow) ? "unfollow" : "follow",
                    }, {
                        // 向后端传递JWT token的方法
                        headers: {
                            // 后台接收的JWT对格式有要求,'JWT'开头,空一格拼接字符串
                            'Authorization': 'JWT ' + this.token
                        },
                        responseType: 'json',
                        // withCredentials:true
                    })
                    .then(response => {

                        console.log(response.data);
                        // console.log(this.spit_id);
                        // location.href = './spit-index.html'
                        // 刷新数据
                        this.get_comments();

                    })
                    .catch(error=> {
                        if (error.response.status == 400) {
                            // alert(error.response.data);
                            console.log(error.response.data)
                        } else {
                            console.log(error.response.data);
                        }
                    })
            }else{
                location.href = './person-loginsign.html';
            }
        },
         // 点击显示隐藏发布评论框
        show_edit_comment:function () {
            if(this.edit_comment_flag == false){
                this.edit_comment_flag = true

            }else{
                this.edit_comment_flag = false
            }
        },
        // 发布评论
        create_comments: function () {
            this.content = CKEDITOR.instances.edit_comment.getData();
            // console.log(content)


            if (this.content){
                axios.post(this.host + '/tucaos/' + this.spit_id + '/' + 'comments/', {

                    content:this.content,

                },{
                    // 向后端传递JWT token的方法
                    headers: {
                        // 后台接收的JWT对格式有要求,'JWT'开头,空一格拼接字符串
                        'Authorization': 'JWT ' + this.token
                    },
                    responseType: 'json'
                })
                    .then(response => {
                        console.log(response.data);
                        // this.get_comments();
                        location.href = './spit-detail.html' + '?spit_id=' + this.spit_id
                    })
                    .catch(error => {
                        console.log(error.response.data);
                    })
            }else {
                alert("发布内容不能为空")
            }

        },
        // 发布子评论
        create_subs_comments: function (parent_id) {


            axios.post(this.host + '/tucaos/' + this.spit_id + '/' + 'comments/', {

                content:this.introduct,
                parent_id:parent_id,

            },{
                // 向后端传递JWT token的方法
                headers: {
                    // 后台接收的JWT对格式有要求,'JWT'开头,空一格拼接字符串
                    'Authorization': 'JWT ' + this.token
                },
                responseType: 'json'
            })
                .then(response => {
                    console.log(response.data);
                    this.introduct = '';
                    // this.get_comments();
                    location.href = './spit-detail.html' + '?spit_id=' + this.spit_id
                })
                .catch(error => {
                    console.log(error.response.data);
                })



        },

    },

});

